<template>
    <!-- <div class="fr page">
        <div class="sui-pagination clearfix">
            <ul>
                
                <li class="active"  v-for="(item,index) in (countPaging.end - countPaging.start+1)" :key="index">
                    <a href="#">1</a>
                </li>

                
                <li class="dotted"><span>...</span></li>
                <li class="next">
                    <a href="javascipt:;">下一页»</a>
                </li>
            </ul>
            <div>
                <span>共{{countPage}}页&nbsp;</span>
            </div>
        </div>
    </div> -->
    <div class="pagination">
        <button :disabled='pageNo === 1' @click="updatePages(1)">首页</button>
        <button :disabled="pageNo === 1" @click="updatePages('up')">上一页</button>
        <button v-if="countPage - continuousNo > 3">...</button>

        <button 
        v-for="(item) in   countPage < continuousNo ? countPage:continuousNo" 
        :key="item"
        :class="{active:pageNo === countPaging.start+item-1}"
        @click="updatePages(countPaging.start+item-1)"
        >
            {{countPaging.start+item-1}}
        </button>

        <button v-if="pageNo < countPage - continuousNo">...</button>
        <button v-if="countPaging.end < countPage">共{{countPage}}页</button>
        <button :disabled="pageNo === countPage" @click="updatePages('down')">下一页</button>
        <button :disabled="pageNo === countPage" @click="updatePages(countPage)">尾页</button>
        <button>共{{total}}条</button>

    </div>
</template>

<script>
export default {
    name: "Pagination",
    props: {
        pageNo:{type: Number,},              // 当前页码数
        total:{                     //总条数
            type: Number,
            default:0
        },   
        pageSize:{               //每页数量
            type: Number,
            default:10,
        },  
        continuousNo:{          //连续页码数
             type: Number,
             required:true,
        },
    },
    computed:{    
        //计算总页数           
        countPage(){
            return  Math.ceil(this.total/this.pageSize)
        },
        //计算连续页其实位置和结束位置
        countPaging(){
            let {continuousNo,total,pageNo} = this
            let start = 0;
            let end = 0;
            if(continuousNo >= this.countPage){
                start = 1;
                end = this.countPage;
            }else{
                start = pageNo-Math.floor(continuousNo/2);
                end = pageNo+Math.floor(continuousNo/2);
                if(start < 1){
                    start = 1;
                    end = continuousNo;
                }
                if(end > this.countPage){
                    end = this.countPage;
                    start = this.countPage - continuousNo +1
                }
            }

            return {
                start,
                end
            }
        }
    },
    methods:{
        updatePages(data){
            this.$emit("updatePages",data)
        },
    }
}
</script>

<style lang="less" scoped>
.pagination{
  button {
    margin:0 5px;
    background-color:#f4f4f5;
    color:#606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;
    &[disabled]{
        color: #c0c4cc;
        cursor: not-allowed;
        }
        
    &.active {
        cursor: not-allowed;
        background-color: #409eff;
        color: #fff;
        }
    }
}
</style>